<html>
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!--
SVG pattern credit:
http://philbit.com/svgpatterns/
-->
<style>
body {
  background-image:url('');
}
input[type="button"] {
  border-radius: 150px;
  box-shadow: -3px -3px 10px 2px rgba(0,0,0,.3) inset,
              0 0 0 15px rgba(255, 255, 255, .6) inset,
              0 0 0 1px rgba(0,0,0,.5),
              2px 2px 10px rgba(0,0,0,.6);
  padding: 15px;
}
</style>
<script>
function sendCmd(btn) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    var s = document.getElementById('status');
    if (this.readyState == this.DONE) {
      s.value = '.';
      s.style.background = '';
    } else {
      s.value = 'O';
      s.style.background = '#FF0000';
    }
  }
  cmd = '/send/' + btn.id;
  xhr.open('GET', cmd);
  xhr.send();
}
function c(btn) {
  sendCmd(btn);
}

function ts(btn) {
  btn.ticker = setInterval(function() {
    sendCmd(btn);
  }, 250);
}
function te(btn) {
  clearTimeout(btn.ticker);
  btn.ticker = 0;
}
</script>
</header>
<body>
<input type="button" id="status" disabled value=".">
<input type="button" id="macro_all_off" value="All off" onclick="c(this)">
<input type="button" id="macro_watch_tv" value="Watch TV" onclick="c(this)">
<input type="button" id="macro_ps3" value="PS3" onclick="c(this)">
<input type="button" id="macro_music" value="Listen Music" onclick="c(this)"><br/>
<input type="button" id="receiver_vol_down" value="-" ontouchstart="ts(this)" ontouchend="te(this)">
<input type="button" id="receiver_vol_up" value="+" ontouchstart="ts(this)" ontouchend="te(this)">
<input type="button" id="receiver_mute" value="Mute" onclick="c(this)">
<br/>
</body>
</html>
